<template>
	<view class="" :data-theme="theme()" :class="theme() || ''">
		<view class="top-tabbar">
			<view :class="status == 0 ? 'tab-item active' : 'tab-item'" @click="stateFunc(0)">进行中</view>
			<view :class="status == 1 ? 'tab-item active' : 'tab-item'" @click="stateFunc(1)">砍价成功</view>
			<view :class="status == 2 ? 'tab-item active' : 'tab-item'" @click="stateFunc(2)">砍价失败</view>
		</view>

		<!--列表-->
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
			@scrolltolower="scrolltolowerFunc">
			<view class="my-bargaing-list">
				<view class="item" @click="gotoDetail(item.bargain_task_id)" v-for="(item, index) in listData"
					:key="index">
					<!--时间-->
					<view class="datetime d-b-c">
						<text class="f28 gray9">{{ item.create_time }}</text>
						<view class="surplus-time" v-if="status == 0">
							<Countdown :config="rturnObjec(item)"></Countdown>
						</view>
					</view>
					<!--商品-->
					<view class="product d-s-s mt30">
						<image lazy-load class="cover" :src="item.file_path" mode="aspectFill"></image>
						<view class="info flex-1">
							<text class="f28 gray3 text-ellipsis-2">{{ item.product_name }}</text>
							<view class="mt20">
								<text class="theme-price f24">砍到底价:</text>
								<text class="theme-price f24">￥</text><text
									class="theme-price f32 fb">{{ item.bargain_price }}</text>
								<text class="ml10 gray9 text-l-t f24">￥{{item.product_price}}</text>
							</view>
							<view class="d-b-c mt10 f24">
								<view class="progress-box">
									<view class="progress-box-active" :style="'width:' + progressReturn(item) + '%;'">
									</view>
								</view>
								<view class="gray9 w-s-n">完成度:{{progressReturn(item)}}%</view>
							</view>
						</view>
					</view>
				</view>
				<view class="d-c-c d-c p30" v-if="listData.length == 0 && !loading">
					<image lazy-load class="list-null-image" src="/static/list-null.png" mode=""></image>
					<text class="cont f32 gray9">暂无相关订单</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</scroll-view>

		<!--更多活动-->
		<view class="more-bargaining"><button class="theme-btn" @click="gotoMore">更多活动</button></view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	import Countdown from '@/components/countdown/countdown.vue';
	export default {
		components: {
			uniLoadMore,
			Countdown
		},
		data() {
			return {
				/*是否正在加载*/
				loading: true,
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*状态选中*/
				status: 0,
				/*顶部刷新*/
				topRefresh: false,
				/*当前第几页*/
				page: 1,
				/*一页多少条*/
				list_rows: 20,
				/*数据*/
				listData: [],
				/*是否有更多*/
				no_more: false,
				/*倒计时配置*/
				countdownConfig: {
					/*开始时间*/
					startstamp: 0,
					/*结束时间*/
					endstamp: 0,
					/*显示类别*/
					type: 'text',
					/*文字*/
					title: '剩余：'
				}
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.listData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onLoad(e) {},
		mounted() {
			this.init();
			/*获取列表*/
			this.getData();
		},
		methods: {
			/*转换参数*/
			rturnObjec(item) {
				return {
					type: 'text',
					startstamp: 0,
					endstamp: item.end_time,
					title: '剩余'
				};
			},

			/*返回百分比*/
			progressReturn(item) {
				if (item.is_floor == 1) {
					return 100;
				} else {
					return item.bargain_rate;
				}
			},

			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('.top-tabbar');
						view.boundingClientRect(data => {
							let h = self.phoneHeight - data.height;
							let foot_v = uni.createSelectorQuery().select('.more-bargaining');
							foot_v
								.boundingClientRect(data2 => {
									let h2 = h - data2.height;
									self.scrollviewHigh = h2;
								})
								.exec();
						}).exec();
					}
				});
			},

			/*状态切换*/
			stateFunc(e) {
				let self = this;
				if (self.status != e) {
					self.listData = [];
					self.page = 1;
					self.status = e;
					self.getData();
				}
			},

			/*获取数据*/
			getData() {
				let self = this;
				self.loading = true;
				self._get(
					'user.bargain/lists', {
						page: self.page,
						list_rows: self.list_rows,
						status: self.status
					},
					function(res) {
						self.loading = false;
						self.listData = self.listData.concat(res.data.list.data);
						self.last_page = res.data.list.last_page;
						if (res.data.list.last_page <= 1) {
							self.no_more = true;
							return false;
						}
					}
				);
			},

			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				if (self.no_more) {
					return;
				}
				self.page++;
				if (self.page <= self.last_page) {
					self.getData();
				} else {
					self.no_more = true;
				}
			},

			/*查看详情*/
			gotoDetail(e) {
				this.gotoPage('/pagesPlus/bargain/haggle/haggle?bargain_task_id=' + e)
			},
			goback() {
				uni.navigateBack({

				})
			},
			/*查看更多活动*/
			gotoMore() {
				this.gotoPage('/pagesPlus/bargain/list/list')
			},

			/*倒计时返回状态*/
			returnValFunc(e, num) {
				console.log(e, num);
			}
		}
	};
</script>

<style lang="scss">
	.more-bargaining {
		position: fixed;
		padding: 20rpx;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #ffffff;

		.theme-btn {
			font-size: 30rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 88rpx;
			@include background_color('background_color');
			border: none;
		}
	}

	.progress-box {
		width: 342rpx;
		height: 12rpx;
		background: #eee;
		border-radius: 6rpx;
		overflow: hidden;
	}

	.progress-box-active {
		height: 12rpx;
		border-radius: 6rpx;
		@include background_color('background_color');
	}

	.my-bargaing-list {
		margin: 0 20rpx;
		padding-bottom: 200rpx;

		.item {
			margin-top: 24rpx;
			padding: 24rpx;
			background: #ffffff;
			border-radius: 15rpx;

			.cover {
				width: 160rpx;
				height: 160rpx;
				border-radius: 15rpx;
				display: block;
				margin-right: 16rpx;
			}
		}

		.surplus-time {
			padding: 4rpx 16rpx;
			border-radius: 4rpx;
			font-size: 26rpx;
			background: #ffffff;
			color: #333333;
		}
	}
</style>